tags: 鐵人賽 React javascript nodejs

鐵人賽第16天，學了這麼多知識，是時候來個實戰讓自己融會貫通一下。

今晚～我想來寫個To DO List吧

• 今天我們來寫個前端的Hello World，也就是To Do List的範例，這個範例可以讓我們練習之前的React招式系列及讓React更優雅的JS系列。

先來個架構分析

• 撰寫之前，我很喜歡先拆解架構，那幫助我們可以規劃出元件的設計。從圖我 們可以知道：

畫面的解析

1. 建立ToDoApp為Top-component：

• 包含一個title，可用<h2>來設計
• 包含Input及ToDoApp兩個套件

2. 建立Input元件，其中包含：

• 一個<input>輸入框
• 一個<button>送出事件

3. 建立ToDoList元件，內容包含：

• 多個<div>以顯示所有的代辦事項

動作的解析

• 在ToDoList我們透過Reducer做統一管理，其中：

• state: 存放待辦事項的紀錄，我們使用[Array]
• dispatch:新增、刪除...等存取待辦事項的動作

• 別忘了我們的React第三招，我們可以透過Context+Reducer讓我們可以輕鬆的讓各個元件，進行一致的操作。

上工囉～開始coding

建立title

// ToDoApp.sj
import React, { useReducer, createContext } from "react";

export default function ToDoApp() {
  return (
    <div>
      <h2 style={{ borderBottom: "1.5px black solid" }}>To Do List</h2>
    </div>
  );
}

建立reducers.js

• 這裡我們先加入ADD新增功能，之後再一點一滴地把其他功能補上

// reducers/js
export default function reducers(toDoList, action) {
  switch (action.type) {
    case "ADD":
      return toDoList.push(action.newEvent);

    default:
      return toDoList;
  }
}

運用Context+Reducer

• 使用useReducer將剛剛建立的reducers連結起來，同時我們給予state初始值["Hello", "One", "Two"]，以利初步測試

// ToDoApp.js
import React, { useReducer, createContext } from "react";
import reducers from "./reducers";

export const ContextStore = createContext();

export default function ToDoApp() {
  const appReducer = useReducer(reducers, ["Hello", "One", "Two"]); //<--給予`state`初始值`["Hello", "One", "Two"]`，以利初步測試

  return (
    <ContextStore.Provider value={{ appReducer: appReducer }}>
      <div>
        <h2 style={{ borderBottom: "1.5px black solid" }}>To Do List</h2>
      </div>
    </ContextStore.Provider>
  );
}

加入 ToDoList.js

• 為了要顯示所有的代辦事項，這裡我們可以使用迭代的方式，將ContextStore傳遞過來的toDoList一個接一個顯示出來

// ToDoList.js
import React, { useContext } from "react";
import { ContextStore } from "./ToDoApp";

export default function ToDoList() {
  const { appReducer } = useContext(ContextStore);
  const toDoList = appReducer[0];

  return (
    <div>
      {
        toDoList.map((e) => (<p>{e}</p>) )
      }
    </div>
  );
}

• 別忘了回到ToDoApp.js將ToDoList加入喔

// ToDoApp.js
import React, { useReducer, createContext } from "react";
import reducers from "./reducers";
import ToDoList from "./ToDoList";   //<-- 加入 ToDoList

export const ContextStore = createContext();

export default function ToDoApp() {
  const appReducer = useReducer(reducers, ["Hello", "One", "Two"]);

  return (
    <ContextStore.Provider value={{ appReducer: appReducer }}>
      <div>
        <h2 style={{ borderBottom: "1.5px black solid" }}>To Do List</h2>
        <ToDoList />  
      </div>
    </ContextStore.Provider>
  );
}

建立Input

• 建立Input.js
• 同時，別忘了在ToDoApp.js將Input加進來喔

//Input.js
import React, {useContext} from 'react'

export default function Input() {
  return (
    <div>
      <input style={{width:"150px"}}></input>
      <button>{"Send"}</button>
    </div>
  )
}

小結

• 今天我們初步把ToDoApp的架構設定好，明天我們來將整個動作串起來，讓整個app更完整。
• 鐵人賽第16天，下半場的第一天，依舊滿懷熱情的往下個階段邁進，加油，繼續Rock~~~